<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
		<title>注册页面</title>

		<!-- Loading third party fonts -->
		<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,700|" rel="stylesheet" type="text/css">
		<link href="fonts/font-awesome.min.css" rel="stylesheet" type="text/css">

		<!-- Loading main css file -->
		<link rel="stylesheet" href="style.css">
		<!--[if lt IE 9]>
		<script src="js/min/ie-support/html5.js"></script>
		<script src="js/min/ie-support/respond.js"></script>
		<![endif]-->
		<script src="js/min/jquery-1.11.1.min.js"></script>
		<script src="js/min/plugins.js"></script>
		<script src="js/min/app.js"></script>
		<script src="js/min/js.cookie.js"></script>
		<script src="js/MyJs/common/utils.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/min/bootstrap.min.js"></script>
		<script src="js/min/bootstrapValidator.js"></script>

	</head>


	<body>
		

		<div id="site-content">
		<div id="header"></div>
			<main class="main-content">
				<div class="container">
					<div class="page">
						<div class="breadcrumbs">
							<a href="#">主页</a>
							<span>注册</span>
						</div>

						<div class="content" style='text-align: center' >
							<form  action="#" method="post" enctype="multipart/form-data">
								<table style='text-align: center'  border="1px" >
									<tr>
										<td colspan="2" style='text-align: center' height="30" >
											<h3 style="color: green">欢迎您注册</h3>
										</td>
										<td style='text-align: center' rowspan="7" ><img id="imag" src="images/headerPhoto.png" alt="" style="height:320px;width: 50rem;"></td>

									</tr>
									<tr>
										<td colspan="2" style='text-align: center' height="30">
											<h5><span style="color: red">红色</span>为必填项 , <span style="color: blue">蓝色</span>为选填项</h5>
										</td>
									</tr>
									<tr>

										<td style='text-align: center' style="color: red"height="30" >用户名:</td>
										<td><input type="text" alt="20" name="username" placeholder="字数不超过20"/></td>
									</tr>
									<tr>
										<td style='text-align: center' style="color: red" height="30">密码:</td>
										<td><input type="password" alt="50" name="password" placeholder="字数不超过50" /></td>
									</tr>

									<tr>
										<td style='text-align: center' style="color: red" height="30">确认密码:</td>
										<td><input type="password"  alt="50" name="password_again" placeholder="字数不超过50"/></td>
									</tr>
									<tr>
										<td style='text-align: center' style="color: blue" height="30">邮箱:</td>
										<td><input type="email" alt="500" name="email" placeholder="按正确的邮箱格式填写"/></td>
									</tr>
									<tr>
										<td style='text-align: center' style="color: blue" height="30">头像:</td>
										<td><input type="file" id="headPhoto"  name="portrait" /></td>
									</tr>
								</table>
								<input type="submit" value="注册" id="SignIn" align="left">
							</form>

						</div>
					</div>
				</div> <!-- .container -->
			</main>
	<div id="footer"></div>
		</div>
		<!-- Default snippet for navigation -->
	</body>
	<script>
		/*显示上传的图片*/

		function getObjectURL(file) {
			let url = null ;
			if (window.createObjectURL!==undefined) {
				url = window.createObjectURL(file) ;
			} else if (window.URL!=undefined) {
				url = window.URL.createObjectURL(file) ;
			} else if (window.webkitURL!=undefined) {
				url = window.webkitURL.createObjectURL(file) ;
			}
			return url ;
		}
		$('#headPhoto').change(function() {
			let eImg=$('#imag');
			eImg.attr('src', getObjectURL($(this)[0].files[0]));
			$(this).after(eImg);
		});
	</script>
	<script src="js/MyJs/common/global.js"></script>
	<script src="js/MyJs/common/functions.js"></script>
	<script src="js/MyJs/common/common.js"></script>

	<script src="js/MyJs/SignIn/global.js"></script>
	<script src="js/MyJs/SignIn/functions.js"></script>
	<script src="js/MyJs/SignIn/SignIn.js"></script>

</html>